<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { listOrders } from '@/services/order'

const user = useUserStore()
const router = useRouter()
const orders = ref([])
const loading = ref(false)
const error = ref('')
const activeTab = ref('all') // 'all', 'pending', 'paid', 'shipped', 'completed', 'cancelled'

// 分页相关状态
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const totalPages = ref(0)

// 过滤条件相关状态
const startTime = ref('')
const endTime = ref('')
const searchOrderNo = ref('')

// 计算属性：根据当前选中的标签严格过滤订单
const filteredOrders = computed(() => {
  // 确保orders.value是数组
  if (!Array.isArray(orders.value)) {
    return []
  }
  
  // 优先检查activeTab是否为'all'
  if (activeTab.value === 'all') {
    return orders.value
  } else {
    // 严格按照status字段过滤订单，只返回匹配的订单
    return orders.value.filter(order => order.status === activeTab.value)
  }
})

// 加载订单数据
async function loadOrders() {
  loading.value = true
  error.value = ''
  try {
    // 确保token已加载完成，解决刷新页面时的时序问题
    if (!user.token) {
      // 等待100ms让token有足够时间从localStorage加载
      await new Promise(resolve => setTimeout(resolve, 100))
      
      // 再次检查token，如果仍然没有token，可能需要重定向到登录页
      if (!user.token) {
        router.push('/login')
        loading.value = false
        return
      }
    }
    
    try {
      // 构建查询参数，严格按照后端接口要求的参数名和类型
      // 改进userId获取逻辑，确保获取当前用户的真实ID
      let userId = null
      if (user.profile && user.profile.id) {
        userId = String(user.profile.id)
      } else {
        // 如果user.profile.id不存在，主动调用API获取当前用户ID
        try {
          // 动态导入auth服务中的getCurrentUserId函数
          const { getCurrentUserId } = await import('@/services/auth')
          const id = await getCurrentUserId()
          userId = String(id)
          // 更新用户profile，避免下次请求再次获取
          user.setProfile({ id: userId })
        } catch (error) {
          // 如果获取失败，可以选择使用默认值或抛出错误
          userId = '1' // 使用默认用户ID作为最后的备选方案
        }
      }
      
      const queryParams = {
        pageNum: Number(currentPage.value), // 确保是整数类型
        pageSize: Number(pageSize.value), // 确保是整数类型
        orderStatus: activeTab.value === 'all' ? null : getStatusNumber(activeTab.value), // 状态数字
        startTime: startTime.value || null, // 日期字符串，格式 YYYY-MM-DD
        endTime: endTime.value || null, // 日期字符串，格式 YYYY-MM-DD
        userId: userId,
        orderNo: searchOrderNo.value || null,
        orderBy: 'createTime', // 按创建时间排序
        orderDirection: 'desc' // 降序排列，最新的订单优先显示
      }
      
      // 调用后端接口获取订单列表
      const res = await listOrders(queryParams)
      
      // 处理分页数据响应
      if (res?.code === 200 && res.data?.list && Array.isArray(res.data.list)) {
        // 转换后端返回的数据结构以适配前端显示
        orders.value = res.data.list.map(order => {
          // 增强数据处理的容错性
          const orderId = order.id || order.orderNo || `order_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
          const orderStatus = order.orderStatus || order.status || 1 // 默认为待付款状态
          const statusStr = getStatusString(orderStatus)
          
          // 直接使用后端返回的所有字段，确保保留原始数据
          const convertedOrder = {
            id: orderId,
            orderNo: order.orderNo || `NO_${orderId}`,
            orderStatus: order.orderStatus,
            orderStatusDesc: order.orderStatusDesc,
            totalAmount: order.totalAmount || order.amount || 0,
            createTime: formatDate(order.createTime || order.createdAt),
            productCount: order.productCount || 0,
            firstProductName: order.firstProductName,
            status: statusStr,
            statusText: order.orderStatusDesc || statusMap[statusStr] || '未知状态',
            items: formatOrderItems(order)
          }
          
          return convertedOrder
        })
        
        // 改进分页信息处理，确保正确获取和使用后端返回的总条数
        // 检查res.data中可能包含总条数的不同字段名
        const backendTotal = res.data.total || res.data.totalCount || res.data.count || orders.value.length
        total.value = Number(backendTotal) || 100 // 如果后端没有返回总条数，设置一个合理的默认值
        
        // 确保totalPages计算正确，防止除零错误
        totalPages.value = pageSize.value > 0 ? Math.ceil(total.value / pageSize.value) : 1
        
        // 确保totalPages至少为1，避免分页控件显示异常
        if (totalPages.value < 1) {
          totalPages.value = 1
        }
        
        // 确保currentPage在有效范围内
        if (currentPage.value > totalPages.value) {
          currentPage.value = totalPages.value
          // 重新加载当前有效页码的数据
          return loadOrders()
        }
      } else {
        orders.value = []
        total.value = 0
        totalPages.value = 0
      }
    } catch (apiError) {
      // API请求失败时，显示后端返回的错误信息
      orders.value = []
      total.value = 0
      totalPages.value = 0
      
      // 尝试从错误响应中提取后端返回的错误信息
      if (apiError.response && apiError.response.data) {
        // 优先使用后端返回的错误信息
        if (apiError.response.data.message) {
          error.value = apiError.response.data.message
        } else if (apiError.response.data.error) {
          error.value = apiError.response.data.error
        } else if (apiError.response.data.msg) {
          error.value = apiError.response.data.msg
        } else if (apiError.response.status === 500) {
          // 对于500错误，显示更友好的提示
          error.value = '服务器内部错误，请稍后再试'
        } else {
          error.value = '获取订单数据失败，请稍后再试'
        }
      } else if (apiError.code === 'ECONNREFUSED') {
        error.value = '无法连接到服务器，请检查网络连接'
      } else {
        error.value = '获取订单数据失败，请稍后再试'
      }
    }
  } catch (err) {
    error.value = '加载订单列表失败，请稍后再试'
    orders.value = []
    total.value = 0
    totalPages.value = 0
    
    // 如果是403错误，重定向到登录页面
    if (err.response && err.response.status === 403) {
      alert('您的登录状态已过期，请重新登录')
      router.push('/login')
    }
  } finally {
    loading.value = false
  }
}

// 状态数字转字符串 - 完整支持所有后端返回的状态值
function getStatusString(statusNumber) {
  const statusMap = {
    1: 'pending',    // 待支付
    2: 'paid',       // 已支付
    3: 'to_ship',    // 待发货
    4: 'shipped',    // 已发货
    5: 'completed',  // 已完成
    6: 'cancelled',  // 已取消
    7: 'refunded'    // 已退款
  }
  return statusMap[statusNumber] || 'unknown'
}

// 状态字符串转数字 - 完整支持所有前端使用的状态值
function getStatusNumber(statusString) {
  const statusMap = {
    'pending': 1,     // 待支付
    'paid': 2,        // 已支付
    'to_ship': 3,     // 待发货
    'shipped': 4,     // 已发货
    'completed': 5,   // 已完成
    'cancelled': 6,   // 已取消
    'refunded': 7,    // 已退款
    'all': null       // 全部状态
  }
  return statusMap[statusString] || null
}

// 格式化日期时间
function formatDate(dateString) {
  if (!dateString) return '无'
  const date = new Date(dateString)
  if (isNaN(date.getTime())) return '无'
  
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 格式化订单商品数据
function formatOrderItems(order) {
  if (!order) return []
  
  // 如果已经有items数组，直接返回
  if (order.items && Array.isArray(order.items)) {
    return order.items
  }
  
  // 否则，根据firstProductName和productCount创建更准确的商品列表
  const items = []
  if (order.firstProductName) {
    // 至少创建一个商品项，显示第一个商品的名称
    items.push({
      id: `item_${order.id || order.orderNo}_1`,
      productName: order.firstProductName,
      // 如果有productCount和totalAmount，可以计算单价
      price: order.productCount && order.productCount > 0 && order.totalAmount 
        ? order.totalAmount / order.productCount 
        : order.totalAmount || 0,
      quantity: 1,
      productImage: ''
    })
    
    // 如果有多个商品，显示商品数量信息
    if (order.productCount && order.productCount > 1) {
      // 显示"等X件商品"的提示
      items.push({
        id: `item_${order.id || order.orderNo}_more`,
        productName: `等${order.productCount - 1}件商品`,
        price: 0,
        quantity: order.productCount - 1,
        productImage: ''
      })
    }
  }
  
  return items
}

// 分页处理函数
function handlePageChange(newPage) {
  // 添加边界检查，确保newPage在有效范围内
  if (newPage >= 1 && newPage <= totalPages.value) {
    currentPage.value = newPage
    loadOrders()
  }
}

// 搜索订单
function searchOrders() {
  currentPage.value = 1
  loadOrders()
}

// 重置过滤条件
function resetFilters() {
  startTime.value = ''
  endTime.value = ''
  searchOrderNo.value = ''
  currentPage.value = 1
  activeTab.value = 'all'
  loadOrders()
}

// 订单状态映射
const statusMap = {
  'pending': '待支付',
  'paid': '已支付',
  'to_ship': '待发货',
  'shipped': '已发货',
  'completed': '已完成',
  'cancelled': '已取消',
  'refunded': '已退款'
}

// 切换标签
function switchTab(tab) {
  activeTab.value = tab
  currentPage.value = 1 // 切换标签时重置到第一页
  loadOrders()
}

// 查看订单详情
function viewOrderDetail(orderId) {
  router.push(`/order/detail/${orderId}`)
}

// 取消订单
import { cancelOrder as cancelOrderApi } from '@/services/order'

async function cancelOrder(orderNo) {
  if (confirm('确定要取消该订单吗？')) {
    loading.value = true
    try {
      // 添加调试日志，查看传入的orderNo
      console.log('取消订单参数:', { orderNo, cancelReason: '用户主动取消' })
      // 调用后端接口取消订单
      const res = await cancelOrderApi({ orderNo, cancelReason: '用户主动取消' })
      if (res?.code === 200) {
        alert('订单已取消')
        // 取消成功后重新加载订单列表
        await loadOrders()
      } else {
        alert(res?.message || '取消订单失败，请重试')
      }
    } catch (error) {
      console.error('取消订单失败:', error)
      alert('取消订单失败，请重试')
    } finally {
      loading.value = false
    }
  }
}

// 支付订单
function payOrder(orderId) {
  // 实际项目中应该跳转到支付页面
  alert('前往支付页面')
}

// 确认收货
async function confirmReceipt(orderId) {
  if (confirm('确认已收到商品吗？')) {
    // 实际项目中应该调用后端接口确认收货
    alert('已确认收货')
    // 确认收货后重新加载订单列表
    await loadOrders()
  }
}

// 页面挂载时加载订单数据
onMounted(() => {
  loadOrders()
})
</script>

<template>
  <div class="container orders">
    <h2>订单</h2>
    
    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <!-- 订单状态标签切换 -->
    <div class="order-tabs">
      <button 
        v-for="tab in ['all', 'pending', 'paid', 'to_ship', 'shipped', 'completed', 'cancelled', 'refunded']" 
        :key="tab"
        :class="['tab-btn', { active: activeTab === tab }]"
        @click="switchTab(tab)"
      >
        {{ tab === 'all' ? '全部' : statusMap[tab] }}
      </button>
    </div>
    
    <!-- 订单筛选条件 -->
    <div class="order-filters">
      <div class="filter-item">
        <label>订单编号：</label>
        <input 
          type="text" 
          v-model="searchOrderNo"
          placeholder="请输入订单编号"
          @keyup.enter="searchOrders"
        >
      </div>
      <div class="filter-item">
         <label>开始日期：</label>
         <input type="date" v-model="startTime" class="date-input" placeholder="请选择日期">
       </div>
       <div class="filter-item">
         <label>结束日期：</label>
         <input type="date" v-model="endTime" class="date-input" placeholder="请选择日期">
       </div>
      <div class="filter-actions">
        <button class="btn btn-primary" @click="searchOrders">搜索</button>
        <button class="btn btn-secondary" @click="resetFilters">重置</button>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      正在加载订单数据...
    </div>
    
    <!-- 订单列表 -->
    <div class="order-list">
      <!-- 添加直接的订单数量显示 -->
      <div class="list-header">
        共找到 {{ Array.isArray(filteredOrders) ? filteredOrders.length : 0 }} 个订单
      </div>
      
      <!-- 为每个订单添加详细的数据id -->
      <template v-if="Array.isArray(filteredOrders) && filteredOrders.length > 0">
        <div v-for="(order, index) in filteredOrders" :key="order.id || `order_index_${index}`" class="order-item">
          <!-- 订单头部 -->
          <div class="order-header">
            <div class="order-info">
              <span class="order-no">订单编号：{{ order.orderNo || order.id || '无' }}</span>
              <span class="order-time">创建时间：{{ order.createTime || '无' }}</span>
            </div>
            <div class="order-status">
              <span class="status-text">{{ statusMap[order.status] || order.status || '未知状态' }}</span>
            </div>
          </div>
          
          <!-- 订单内容 -->
          <div class="order-content">
            <div class="order-summary" style="margin-bottom: 10px;">
              <p>总金额：¥{{ Number(order.totalAmount || order.amount || 0).toFixed(2) }}</p>
              <p>商品数量：{{ order.productCount || (order.items && Array.isArray(order.items) ? order.items.length : 0) }} 件</p>
            </div>
            
            <!-- 商品列表 -->
            <div v-if="order.items && Array.isArray(order.items) && order.items.length > 0" class="order-items">
              <div v-for="(item, itemIndex) in order.items" :key="item.id || `item_${order.id}_${itemIndex}`" class="order-product">
                <div v-if="item.productImage && itemIndex === 0" class="product-image-container">
                  <img :src="item.productImage" alt="商品图片" class="product-image">
                </div>
                <div class="product-info">
                  <div class="product-name">{{ item.productName || '商品名称' }}</div>
                  <div v-if="item.price > 0" class="product-price">¥{{ Number(item.price || 0).toFixed(2) }} x{{ item.quantity || 1 }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 订单操作 -->
          <div class="order-footer">
            <!-- 待支付订单显示支付和取消按钮 -->
            <template v-if="order.status === 'pending'">
              <button class="btn btn-primary action-btn" @click="payOrder(order.id)">
                去支付
              </button>
              <button class="btn btn-danger action-btn" @click="cancelOrder(order.orderNo)">
                取消订单
              </button>
            </template>
            
            <!-- 待发货订单显示取消按钮 -->
            <template v-else-if="order.status === 'to_ship'">
              <button class="btn btn-danger action-btn" @click="cancelOrder(order.orderNo)">
                取消订单
              </button>
            </template>
            
            <!-- 所有订单都显示查看详情按钮 -->
            <button class="btn btn-secondary action-btn" @click="viewOrderDetail(order.id)">
              查看详情
            </button>
          </div>
        </div>
      </template>
      
      <!-- 数据存在但格式问题导致的备用显示 -->
      <template v-else-if="filteredOrders && typeof filteredOrders === 'object' && !Array.isArray(filteredOrders)">
        <div class="error-message">
          <p>订单数据格式异常（非数组）</p>
        </div>
      </template>
      
      <!-- 订单为空或非数组的情况 -->
      <div v-else class="empty-orders">
        <div class="empty-icon">📦</div>
        <div class="empty-text">暂无订单记录</div>
        <router-link to="/" class="btn btn-primary go-shopping">去购物</router-link>
      </div>
    </div>
    
    <!-- 分页控件 -->
    <div v-if="total > 0" class="pagination">
      <button 
        class="page-btn" 
        :disabled="currentPage === 1"
        @click="handlePageChange(currentPage - 1)"
      >
        上一页
      </button>
      <span class="page-info">
        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页，共 {{ total }} 条记录
      </span>
      <button 
        class="page-btn" 
        :disabled="currentPage === totalPages"
        @click="handlePageChange(currentPage + 1)"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 变量定义 */
:root {
  --primary: #e1251b;
  --secondary: #f4f4f4;
  --text-primary: #333;
  --text-secondary: #666;
  --text-tertiary: #999;
  --border: #eee;
  --radius: 4px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --success: #52c41a;
  --warning: #faad14;
}

/* 基础样式 */
.orders {
  padding: 20px 0;
  min-height: 600px;
}

.orders h2 {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* 标签切换 */
.order-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
  overflow-x: auto;
  background-color: white;
  padding: 0 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tab-btn {
  padding: 15px 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  position: relative;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  color: var(--primary);
}

.tab-btn.active {
  color: var(--primary);
  font-weight: 500;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background-color: var(--primary);
  border-radius: 3px;
}

/* 订单列表 */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.list-header {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding: 10px 20px;
  background-color: #f9f9f9;
  border-radius: var(--radius);
}

/* 订单卡片 */
.order-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: white;
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s ease;
}

.order-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 订单头部 */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #fff7f0;
  border-bottom: 1px solid #fff0e6;
}

.order-info {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.order-no {
  font-weight: 500;
  color: var(--text-primary);
}

.status-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  padding: 4px 12px;
  background-color: rgba(225, 37, 27, 0.1);
  border-radius: 12px;
}

/* 订单内容 */
.order-content {
  padding: 20px;
}

.order-summary {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.order-summary p {
  margin: 5px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* 商品列表 */
.order-items {
  margin-bottom: 15px;
}

.order-product {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.order-product:last-child {
  border-bottom: none;
}

.product-image-container {
  margin-right: 16px;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.product-name:hover {
  color: var(--primary);
}

.product-price {
  font-size: 14px;
  color: var(--primary);
  margin-bottom: 4px;
  font-weight: 500;
}

/* 订单底部 */
.order-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 20px;
  background-color: #fafafa;
  border-top: 1px solid var(--border);
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: #cf1122;
  border-color: #cf1122;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(225, 37, 27, 0.3);
}

.btn-secondary {
  background-color: white;
  color: var(--text-secondary);
  border-color: #d9d9d9;
}

.btn-secondary:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(225, 37, 27, 0.1);
}

.action-btn {
  padding: 6px 16px;
  font-size: 12px;
}

/* 空状态 */
.empty-orders {
  text-align: center;
  padding: 80px 20px;
  background-color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 20px;
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-text {
  font-size: 16px;
  color: var(--text-tertiary);
  margin-bottom: 30px;
}

.go-shopping {
  padding: 10px 32px;
  font-size: 14px;
}

/* 错误信息 */
.error-message {
  padding: 12px 16px;
  background-color: #fff2f0;
  color: #ff4d4f;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid #ffccc7;
}

/* 筛选条件 */
.order-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
  border-radius: var(--radius);
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.filter-item input {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.filter-item input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(225, 37, 27, 0.1);
}

.filter-item input[type="text"] {
  min-width: 200px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* 日期输入框样式 */
.date-input {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.date-input:hover {
  border-color: #999;
}

.date-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(225, 37, 27, 0.1);
}

/* 加载状态 */
.loading-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-tertiary);
  background-color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 20px;
}

/* 分页控件 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 16px 20px;
  background-color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.page-btn {
  padding: 8px 20px;
  border: 1px solid #d9d9d9;
  background-color: white;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  outline: none;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(225, 37, 27, 0.1);
}

.page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.page-info {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .orders {
    padding: 10px 0;
  }
  
  .orders h2 {
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  .order-tabs {
    padding: 0 10px;
  }
  
  .tab-btn {
    padding: 12px 16px;
    font-size: 13px;
  }
  
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
  }
  
  .order-info {
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
  }
  
  .order-content {
    padding: 15px;
  }
  
  .order-footer {
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 15px;
  }
  
  .product-image {
    width: 60px;
    height: 60px;
  }
  
  .product-name {
    font-size: 13px;
  }
  
  .product-price {
    font-size: 13px;
  }
  
  .filter-item input[type="text"] {
    min-width: 100%;
  }
  
  /* 响应式筛选条件 */
  .order-filters {
    flex-direction: column;
    gap: 12px;
    padding: 15px;
  }
  
  .filter-item {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .filter-item input {
    width: 100%;
    min-width: unset;
  }
  
  .filter-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  
  /* 响应式分页控件 */
  .pagination {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    padding: 12px;
  }
  
  .page-btn {
    flex: 1;
    min-width: 80px;
    text-align: center;
  }
  
  .page-info {
    width: 100%;
    text-align: center;
    order: -1;
  }
  
  .empty-orders {
    padding: 60px 15px;
  }
  
  .empty-icon {
    font-size: 60px;
  }
  
  .loading-state {
    padding: 60px 15px;
  }
}

@media (max-width: 480px) {
  .tab-btn {
    padding: 10px 12px;
    font-size: 12px;
  }
  
  .order-item {
    border-radius: 0;
  }
  
  .action-btn {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .btn {
    padding: 10px 12px;
    font-size: 13px;
  }
}
</style>
